<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">我的任务</h3>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <button class="btn btn-success" id="refresh-tasks"><i class="fa fa-refresh"></i> 刷新任务</button>
                        <button class="btn btn-primary" data-toggle="modal" data-target="#report-modal"><i class="fa fa-plus"></i> 报工</button>
                        <button class="btn btn-info" data-toggle="modal" data-target="#scan-modal"><i class="fa fa-qrcode"></i> 扫码报工</button>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 报工模态框 -->
<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="reportModalLabel">报工</h4>
            </div>
            <form id="report-form">
                <div class="modal-body">
                    <div class="form-group">
                        <label>选择任务：</label>
                        <select name="allocation_id" class="form-control" id="task-select" required>
                            <option value="">请选择任务</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>报工数量：</label>
                        <input type="number" name="quantity" class="form-control" min="1" required>
                        <span class="help-block">最大可报数量：<span id="max-quantity">0</span></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">提交报工</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 扫码报工模态框 -->
<div class="modal fade" id="scan-modal" tabindex="-1" role="dialog" aria-labelledby="scanModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="scanModalLabel">扫码报工</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>扫描二维码：</label>
                    <input type="text" class="form-control" id="qr-input" placeholder="请扫描二维码或手动输入">
                </div>
                <div id="scan-result" style="display: none;">
                    <div class="alert alert-info">
                        <h5>任务信息：</h5>
                        <p id="task-info"></p>
                    </div>
                    <div class="form-group">
                        <label>报工数量：</label>
                        <input type="number" class="form-control" id="scan-quantity" min="1">
                        <span class="help-block">最大可报数量：<span id="scan-max-quantity">0</span></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="scan-submit" style="display: none;">提交报工</button>
            </div>
        </div>
    </div>
</div>

<script>
    var Table = $("#table").bootstrapTable({
        url: 'scanwork/report/worker',
        pk: 'id',
        sortName: 'id',
        columns: [
            [
                {field: 'id', title: __('Id'), sortable: true},
                {field: 'order.order_no', title: __('订单号'), align: 'left'},
                {field: 'model.product.name', title: __('产品名称'), align: 'left'},
                {field: 'model.name', title: __('型号名称'), align: 'left'},
                {field: 'process.name', title: __('工序名称'), align: 'left'},
                {field: 'quantity', title: __('分配数量'), align: 'center'},
                {field: 'reported_quantity', title: __('已报数量'), align: 'center'},
                {field: 'remaining_quantity', title: __('待报数量'), align: 'center'},
                {field: 'progress', title: __('进度'), align: 'center', formatter: function(value, row, index) {
                    if (value === undefined || value === null) {
                        return '0%';
                    }
                    return value + '%';
                }},
                {field: 'status', title: __('状态'), formatter: function(value, row, index) {
                    if (value == 0) {
                        return '<span class="label label-warning">进行中</span>';
                    } else {
                        return '<span class="label label-success">已完成</span>';
                    }
                }},
                {field: 'createtime', title: __('分配时间'), formatter: Table.api.formatter.datetime, sortable: true}
            ]
        ]
    });

    // 刷新任务
    $('#refresh-tasks').click(function() {
        Table.bootstrapTable('refresh');
        loadTasks();
    });

    // 加载任务列表
    function loadTasks() {
        $.get('scanwork/report/getWorkerTasks', function(data) {
            if (data.code === 1) {
                var taskSelect = $('#task-select');
                taskSelect.empty().append('<option value="">请选择任务</option>');
                
                data.data.forEach(function(task) {
                    taskSelect.append('<option value="' + task.id + '" data-max="' + task.remaining_quantity + '">' + 
                        task.order.order_no + ' - ' + task.model.product.name + ' - ' + task.model.name + ' - ' + task.process.name + 
                        ' (待报: ' + task.remaining_quantity + ')</option>');
                });
            }
        });
    }

    // 任务选择变化
    $('#task-select').change(function() {
        var selectedOption = $(this).find('option:selected');
        var maxQuantity = selectedOption.data('max') || 0;
        $('#max-quantity').text(maxQuantity);
        $('input[name="quantity"]').attr('max', maxQuantity);
    });

    // 报工表单提交
    $('#report-form').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        
        $.post('scanwork/report/submit', formData, function(data) {
            if (data.code === 1) {
                Toastr.success(data.msg);
                $('#report-modal').modal('hide');
                Table.bootstrapTable('refresh');
                loadTasks();
                $('#report-form')[0].reset();
            } else {
                Toastr.error(data.msg);
            }
        });
    });

    // 扫码输入
    $('#qr-input').on('input', function() {
        var qrCode = $(this).val();
        if (qrCode.length > 0) {
            $.post('scanwork/report/scan', {qr_code: qrCode}, function(data) {
                if (data.code === 1) {
                    var task = data.data;
                    $('#task-info').html(
                        '订单号：' + task.order.order_no + '<br>' +
                        '产品：' + task.model.product.name + ' - ' + task.model.name + '<br>' +
                        '工序：' + task.process.name + '<br>' +
                        '待报数量：' + task.remaining_quantity
                    );
                    $('#scan-max-quantity').text(task.remaining_quantity);
                    $('#scan-quantity').attr('max', task.remaining_quantity);
                    $('#scan-result').show();
                    $('#scan-submit').show();
                    $('#scan-submit').data('allocation-id', task.id);
                } else {
                    Toastr.error(data.msg);
                    $('#scan-result').hide();
                    $('#scan-submit').hide();
                }
            });
        }
    });

    // 扫码报工提交
    $('#scan-submit').click(function() {
        var allocationId = $(this).data('allocation-id');
        var quantity = $('#scan-quantity').val();
        
        if (!quantity || quantity <= 0) {
            Toastr.error('请输入有效的报工数量');
            return;
        }
        
        $.post('scanwork/report/submit', {
            allocation_id: allocationId,
            quantity: quantity
        }, function(data) {
            if (data.code === 1) {
                Toastr.success(data.msg);
                $('#scan-modal').modal('hide');
                Table.bootstrapTable('refresh');
                loadTasks();
                $('#qr-input').val('');
                $('#scan-result').hide();
                $('#scan-submit').hide();
            } else {
                Toastr.error(data.msg);
            }
        });
    });

    // 页面加载时初始化
    $(function() {
        loadTasks();
    });
</script> 